<template>
  <div id="car-models">
    <el-card shadow="never">
      <el-form ref="form" :model="returnData">
        <el-row type="flex" style="width:100%">
          <el-form-item label="运算任务编号" label-width="120px" style="flex:1;padding:0 30px ">
            <el-input placeholder="请输入运算任务编号"></el-input>
          </el-form-item>
          <el-form-item label="起始地机构" label-width="120px" style="flex:1;padding:0 30px ">
            <el-select placeholder="请选择起始地机构" style="width:100%" v-model="returnData.startAgencyId">
              <el-option :value="strtTree.value" :label="strtTree.label" style="height: auto">
                <el-tree :expand-on-click-node="false" :data="TreeData" node-key="id" ref="starttree" highlight-current @node-click="checkstart" :props="defaultProps"></el-tree>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目的地机构" label-width="120px" style="flex:1;padding:0 30px ">
            <el-select placeholder="请选择目的地机构" style="width:100%" v-model="returnData.endAgencyId">
              <el-option :value="endTree.value" :label="endTree.label" style="height: auto">
                <el-tree :expand-on-click-node="false" :data="TreeData" node-key="id" ref="endtree" highlight-current @node-click="checkend" :props="defaultProps"></el-tree>
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row type="flex">
          <el-form-item label="回车时间" label-width="120px" style="flex:1;padding:0 30px ">
            <el-input placeholder="请输入车辆类型"></el-input>
          </el-form-item>

          <el-form-item label="车辆是否可用" label-width="120px" style="flex:1;padding:0 30px ">
            <el-input placeholder="请输入车辆类型"></el-input>
          </el-form-item>
          <el-form-item style="flex:1;padding:0 30px ;">
            <el-button type="primary">搜索</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top:20px">
      <el-row>
        <el-table stripe :data="tableData" class="table" style="width: 100%">
          <el-table-column prop="transportTaskId" label="运输任务编号" width="200px">
          </el-table-column>
          <el-table-column prop="startAgencyName" label="起始地机构">
          </el-table-column>
          <el-table-column prop="endAgencyName" label="目的地机构">
          </el-table-column>
          <el-table-column prop="transportOrderNumber" label="运单数量">
          </el-table-column>
          <el-table-column prop="outStorageTime" label="出车时间">
          </el-table-column>
          <el-table-column prop="intoStorageTime" label="回车时间">
          </el-table-column>
          <el-table-column prop="licensePlate" label="车牌号码">
          </el-table-column>
          <el-table-column prop="isAvailable" label="车辆是否可用">
            <template #default={row}>
              <span>{{row.isAvailable?"可用":"不可用"}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default={row}>
              <el-button size="mini" type="text" style="color:#419eff" @click="EditModels(row.id)">编辑</el-button>
              <span style="color:#dcdfe6;margin:0 8px">|</span>

              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="DelModels(row.id)">
                <el-button size="mini" slot="reference" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="center" style="margin-top:20px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="returnData.page" :page-sizes="[10, 20, 30, 40]" :page-size="returnData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </el-card>

  </div>
</template>

<script>
import { truckReturnAPI } from '@/api/truck'
import { organizationTreeDataAPI } from '@/api/branches'
export default {
  name: 'car-models',
  data () {
    return {
      tableData: [],
      total: 0,
      returnData: {
        endAgencyId: '',
        intoStorageEndTime: '',
        intoStorageStartTime: '',
        isAvailable: true,
        startAgencyId: '',
        transportTaskId: '',
        page: 1,
        pageSize: 10

      },
      strtTree: {
        value: '',
        label: ''
      },
      endTree: {
        value: '',
        label: ''
      },
      TreeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },

  created () {
    this.truckReturn()
    this.organizationTreeData()
  },
  methods: {
    // 回车登记列表
    async truckReturn () {
      const { counts, items } = await truckReturnAPI(this.returnData)
      this.tableData = items
      this.total = +counts
    },

    // 获取机构列表
    async organizationTreeData () {
      this.TreeData = JSON.parse(await organizationTreeDataAPI())
    },

    // 选择起始地
    checkstart (data) {
      this.strtTree.value = data.id
      this.strtTree.label = data.name
      this.returnData.startAgencyId = data.id
    },
    // 选择结束地
    checkend (data) {
      this.endTree.value = data.id
      this.endTree.label = data.name
      this.returnData.endAgencyId = data.id
    },

    // 页面切换
    handleSizeChange (val) {
      this.returnData.page = 1
      this.returnData.pageSize = val
      this.truckReturn()
    },
    handleCurrentChange (val) {
      this.returnData.page = val
      this.truckReturn()
    }
  }
}
</script>

<style lang="less" scoped>
#car-models {
  .table {
    margin-top: 20px;
    color: #20232a;
    border: 1px solid #ebeef5;
    border-bottom: 0;
  }
}
</style>
